<template>
    <page-container bgColor="#F4F4F4">

        <cu-custom :isBack="true" bgColor="bg-white" slot="header">
            <block slot="content">
                <view class="text-center text-black ">搜索</view>
            </block>
        </cu-custom>

        <block slot="center">
            <view class="search-items">

                <view class="searchI">
                    <view class="search-box">
                        <input type="text" value="" placeholder="搜一搜,有好物" class="seach-input" v-model="keyText" @confirm="clickRequest" confirm-type="send" @input="inputVal" />
                        <image :src="staticImgUrl+'chat/seach-icon.png'" mode="scaleToFill" class="seach-icon"></image>
                    </view>
                    <view class="cancel-text" @click="cancetext">{{tipText}}</view>
                </view>

                <view class="fgx"></view>

                <view class="search-tip" v-if="notKey==true">
                    <view class="tip-text tip-one">没有找到相关内容</view>
                    <view class="tip-text tip-two">换个关键词或试下吧~~</view>
                </view>

                <view style="width: 100%;height: 10rpx;background: #F4F4F4;" v-if="notKey==true"></view>

                <view class="history">
                    <view class="history-title">
                        <view class="stitle">搜索历史</view>
                        <view class="cancel-hs" @click="cancelht()">清空</view>
                    </view>
                </view>

                <view class="bubble">
                    <view v-if="list_arr.length>0" class="bubble-text" v-for="(item,index) in list_arr" :key="index" @click="kwToSearch(item)">{{item}}</view>
                </view>

                <view class="search-tip" v-if="list_arr.length==0">
                    <view class="tip-text tip-one">暂无搜索历史</view>
                </view>
            </view>
        </block>

    </page-container>
</template>
<script>
export default {
	name: 'Searchindex',
	data() {
		return {
			tipText: '取消',
			notKey: false,
			keyText: '',
			list_arr: [],
			contents: null
		}
	},
	onLoad() {

	},
	onShow() {
		if (this.$util.queryObj().contents) {
			this.contents = this.$util.queryObj().contents
		}
		// 读取缓存历史搜索记录
		if (uni.getStorageSync('hisarr')) {
			this.list_arr = uni.getStorageSync('hisarr')
			// console.log("读取缓存历史搜索记录",this.list_arr)
		} else {
			this.list_arr = []
		}
	},
	created() {

	},
	methods: {
		cancetext() {
			this.keyText = ''
		},
		cancelht() {
			uni.removeStorageSync('hisarr')
			this.list_arr = []
		},
		inputVal(e) {
			this.keyText = e.detail.value
		},
		// 点击搜索
		clickRequest() {

			if (this.keyText == '') {
				this.$Utils.tip('输入点什么吧~')
				return false
			}
			var arrs = this.list_arr
			var arrnum = arrs.indexOf(this.keyText)
			if (arrnum != -1) {
				arrs.splice(arrnum, 1)
				var newarr = arrs.push(this.keyText)
				JSON.parse(newarr)
			} else {
				var newarr = arrs.push(this.keyText)
				JSON.parse(newarr)
			}
			uni.setStorageSync('hisarr', this.list_arr)
			if (this.contents != null) {

				this.$request.search({
					keyword: this.keyText,
					pages: 1,
					pages_size: 10
				}).then(res => {
					// console.log(res)
					if (res.data.list.length != 0) {
						this.notKey = false
						uni.setStorageSync('keyText', this.keyText)
						this.$util.redirectTo('/livePages/searchindex/searchinfo', {
							tabIndex: 1
						})
						this.keyText = ''
					} else {
						uni.setStorageSync('keyText', this.keyText)
						this.notKey = true
						this.$util.redirectTo('/livePages/searchindex/searchinfo', {
							tabIndex: 1
						})
						// this.$Utils.tip('换个关键词或试下吧~~')
					}
				})
			} else {

				this.$request.searchElse({
					keyword: this.keyText,
					pages: 1,
					pages_size: 10
				}).then(res => {
					// console.log(res)
					if (res.data.list.length != 0) {
						this.notKey = false
						uni.setStorageSync('keyText', this.keyText)
						this.$util.redirectTo('/livePages/searchindex/searchinfo')

						this.keyText = ''
					} else {
						uni.setStorageSync('keyText', this.keyText)
						this.notKey = true
						this.$util.redirectTo('/livePages/searchindex/searchinfo')

						// this.$Utils.tip('换个关键词或试下吧~~')
					}
				})
			}

		},
		/** 点击关键字搜索 */
		kwToSearch(keyText) {
			if (this.contents != null) {
				this.$request.search({
					keyword: keyText,
					pages: 1,
					pages_size: 10
				}).then(res => {
					// console.log(res)
					if (res.data.list.length != 0) {
						this.notKey = false
						uni.setStorageSync('keyText', keyText)
						this.$util.redirectTo('/livePages/searchindex/searchinfo', {
							tabIndex: 1
						})
						this.keyText = ''
					} else {
						uni.setStorageSync('keyText', keyText)
						this.notKey = true
						this.$util.redirectTo('/livePages/searchindex/searchinfo', {
							tabIndex: 1
						})
						// this.$Utils.tip('换个关键词或试下吧~~')
					}
				})
			} else {
				this.$request.searchElse({
					keyword: keyText,
					pages: 1,
					pages_size: 10
				}).then(res => {
					// console.log(res)
					if (res.data.list.length != 0) {
						this.notKey = false
						uni.setStorageSync('keyText', keyText)
						this.$util.redirectTo('/livePages/searchindex/searchinfo')
						this.keyText = ''
					} else {
						uni.setStorageSync('keyText', keyText)
						this.notKey = true
						this.$util.redirectTo('/livePages/searchindex/searchinfo')
						// this.$Utils.tip('换个关键词或试下吧~~')
					}
				})
			}
		}

	},
	mounted() {

	}
}
</script>
<style lang="scss" scoped>
image {
    width: 100%;
    height: 100%;
}

.fgx {
    width: 100%;
    height: 1rpx;
    background-color: #f4f4f4;
    margin-top: 14rpx;
    margin-bottom: 60rpx;
}

.search-items {
    width: 100%;
    background-color: #ffffff;
    padding-top: 14rpx;
    padding-bottom: 14rpx;

    .searchI {
        display: flex;
        align-items: center;
        justify-content: space-around;

        .search-box {
            width: 600rpx;
            height: 56rpx;
            position: relative;

            .seach-input {
                width: 100%;
                height: 56rpx;
                background: #f4f4f4;
                border-radius: 28px;
                box-sizing: border-box;
                padding: 0 65rpx;
                font-weight: 500;
                color: #aaaaaa;
                font-size: 24rpx;
            }

            .seach-icon {
                width: 24rpx;
                height: 24rpx;
                position: absolute;
                left: 24rpx;
                top: 16rpx;
            }
        }

        .cancel-text {
            width: 100rpx;
            height: 48rpx;
            background: #f4f4f4;
            border-radius: 30rpx;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            text-align: center;
            line-height: 48rpx;
        }
    }

    .search-tip {
        width: 100%;
        padding-bottom: 50rpx;

        .tip-text {
            text-align: center;
        }

        .tip-one {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
        }

        .tip-two {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            padding-top: 13rpx;
        }
    }

    .history {
        width: 100%;

        .history-title {
            width: 92%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 28rpx;
            padding-bottom: 28rpx;

            .stitle {
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
            }

            .cancel-hs {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #999999;
            }
        }
    }

    .bubble {
        width: 96%;
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;

        .bubble-text {
            width: 180rpx;
            height: 61rpx;
            background: #f4f4f4;
            border-radius: 30rpx;
            line-height: 61rpx;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 30rpx;
            padding-left: 10rpx;
            padding-right: 10rpx;
            margin-top: 20rpx;
        }
    }
}
</style>
